<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html >
<html lang="en">
<head>
<%@include file="../../common/includeBaseSet.jsp"%>
<%@include file="../../common/includeSystemSet.jsp"%>
<%@include file="../../common/operation_forbid.jsp"%>
<%@include file="../../common/jsVersion.jsp"%>
<script type="text/javascript" src="${jypath}/static/js/date.js"></script>
<script type="text/javascript"
	src="${jypath}/static/plugins/laypage/laypage.js"></script>
<style type="text/css">
a {
	cursor: pointer
}
</style>

</head>
<body>
	<div class="page-content" id="giveUpDiv">

		<form class="form-horizontal" id="giveUpForm">
			<div class="col-xs-12 panel panel-default">
				<div style="margin-top: 1%">
					<div class="col-xs-5">
						<div class="form-group">
							<label class="col-xs-4 control-label">项目:</label>
							<div class="col-xs-6">
								<select class="form-control" v-model="params.projectId">
									<option v-for="(row,index) in projectList"
										v-bind:value="row.id">{{row.projectName}}</option>
									<c:if test="${permitBtn == 'true'}">
								    	<option value="">全选</option>
								    </c:if>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="col-xs-4 control-label">客户创建时间:</label>
							<div class="col-xs-3">
								<!-- 用v-model 绑定值  -->
								<input type="text" class="form-control" onclick="WdatePicker()"
									id="createTimeBefore" />
							</div>
							<div class="col-xs-3">
								<input type="text" class="form-control" onClick="WdatePicker()"
									id="createTimeAfter" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-xs-4 control-label">客户放弃时间:</label>
							<div class="col-xs-3">
								<input type="text" class="form-control" onClick="WdatePicker()"
									id="resignTimeBefore" />
							</div>
							<div class="col-xs-3">
								<input type="text" class="form-control" onClick="WdatePicker()"
									id="resignTimeAfter" />
							</div>
						</div>

						<div class="form-group">
							<label class="col-xs-4 control-label">首次接触方式:</label>
							<div class="col-xs-6">
								<select class="form-control" v-model="params.ftContactWay">
									<option value="">请选择</option>
									<option  v-for="(row,index) in ftContactWayList" v-bind:value="row.id">{{row.codeName}}</option>
								</select>
							</div>
						</div>
					</div>
					<div class="col-xs-5">
						<div class="form-group">
							<label class="col-xs-3 control-label">原经纪人:</label>
							<div class="col-xs-6">
								<select class="form-control" v-model="params.userCode">
									<option value="">全部</option>
									<option v-for="(row,index) in userList" v-bind:value="row.id"
										v-if="row.id!=-1">{{row.userName}}</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="col-xs-3 control-label">姓名或手机:</label>
							<div class="col-xs-6">
								<input class="form-control" type="text"
									placeholder="可根据客户姓名手机号模糊查询" v-model="params.customerName" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-xs-3 control-label">意向等级:</label>
							<div class="col-xs-6">
								<select class="form-control" v-model="params.intentionLevel">
									<option value="">全部</option>
									<option value="2">A</option>
									<option value="3">B</option>
									<option value="4">C</option>
									<option value="5">D</option>
								</select>
							</div>
						</div>
						<div class="form-group" v-show="giveUpTypeShow">
							<label class="col-xs-3 control-label">放弃方式:</label>
							<div class="col-xs-6">
								<select class="form-control" v-model="params.giveUpType">
									<option value="">全部</option>
									<option value="1">系统放弃</option>
									<option value="2">用户放弃</option>
								</select>
							</div>
						</div>

					</div>

				</div>

			</div>
			<div class="form-group" style="text-align: center;">
				<div>
					<button class="btn btn-warning  btn-xs" title="查询" type="button"
						v-on:click="initGiveUpList">
						<i class="icon-search bigger-110 icon-only">查询</i>
					</button>
					
					<button class="btn btn-default  btn-xs" title="清空" type="button"
						v-on:click="restButton">
						<i class="icon-refresh bigger-110 icon-only">清空</i>
					</button>

					<button type="button" class="btn btn-primary btn-xs" title="导出"
						v-on:click="exportGiveUpList">
						<i class="icon-arrow-down bigger-110 icon-only">导出</i>
					</button>

					<button type="button" class="btn btn btn-danger btn-xs"
						title="批量分配" v-show="isShow" v-on:click="batchAllotCustomer">
						<i class="icon-share-alt bigger-110 icon-only">批量分配</i>
					</button>
				</div>
			</div>
		</form>
		<div class="col-xs-12" style="overflow-x: auto; overflow-y: hidden; white-space: nowrap;">
			<table id="baseTable"
				class="table table-striped table-bordered table-hover">
				<thead>
					<tr>
						<th class="center"><input type="checkbox" v-model='checked' />
						</th>
						<th class="center">客户姓名</th>
						<th class="center">联系电话</th>
						<th class="center">客户性别</th>
						<th class="center">所属项目</th>
						<th class="center">意向等级</th>
						<th class="center">原经纪人</th>
						<th class="center">首次接触方式</th>
						<th class="center">创建时间</th>
						<th class="center">最后跟进时间</th>
						<th class="center">放弃时间</th>
						<th class="center">放弃方式</th>
					</tr>

				</thead>
				<tbody>
					<tr v-for="(row,index) in giveUpList">
						<td class="center"><input type="checkbox" @click="checkCustomer(row.projectName)"
							v-model="customerIds" v-bind:value="row.id" /></td>
						<td class="center"><a style="text-decoration: none;"
							v-on:click="customerDetail(row)">{{row.customerName}}</a></td>
						<td class="center">{{row.customerPhone}}</td>
						<td class="center">{{row.customerSex}}</td>
						<td class="center">{{row.projectName}}</td>
						<td class="center">{{row.intentionLevel | formatLevel}}</td>
						<td class="center">{{row.userName}}</td>
						<td class="center">{{row.ftContactWay}}</td>
						<td class="center">{{row.createTime | formatDate}}</td>
						<td class="center">{{row.lastFollowTime | formatDate}}</td>
						<td class="center">{{row.resignTime | formatDate}}</td>
						<td class="center">{{row.giveUpType == 1? "系统放弃":"用户放弃" }}</td>
					</tr>
				</tbody>
			</table>
			<div class="row" id="pageing" style="text-align: center;"></div>
		</div>

		<!-- 模态框（Modal） -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog" style="width: 450px;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">批量分配</h4>
					</div>
					<form class="form-horizontal" role="form"
						style="padding-top: 20px; padding-left: 20px;">
						<div class="form-group">
							<label class="col-sm-3 control-label">所属项目:</label>
							<div class="col-sm-8">
								<input disabled class="form-control" type="text" v-model="selProjectName" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">目标项目:</label>
							<div class="col-sm-8">
								<select class="form-control" v-model="targetProjectId">
									<option v-for="(row,index) in projectList"
											v-bind:value="row.id">{{row.projectName}}</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">销售组:</label>
							<div class="col-sm-8">
								<select class="form-control" v-model="salesGroupId">
									<option value="">请选择</option>
									<option v-bind:value="row.id"
										v-for="(row,index) in returnGroupList">{{row.name}}</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">经纪人:</label>
							<div class="col-sm-8">
								<select class="form-control" v-model="consultantUserId">
									<option value="">请选择</option>
									<option v-for="(row,index) in consultantUserList"
										v-bind:value="row.id">{{row.userName}}</option>
								</select>
							</div>
						</div>
					</form>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" v-on:click="close">关闭
						</button>
						<button type="button" class="btn btn-primary"
							v-on:click="sumbitCustomer">确定</button>
					</div>
				</div>
			</div>
		</div>

	</div>

</body>
<script type="text/javascript">
var giveUpDiv = new Vue({
	el:"#giveUpDiv",
	data:{
		page:1,
		limit:10,
		giveUpList:[],
		projectList:[],
		userList:[],
		params:{
    		projectId:'',
    		resourcesCode:'menu_0006_0020',
    		giveUpStatus:'1',
    		intentionLevel:'',
    		userCode:'',
    		ftContactWay:'',
			giveUpType: ''
    	}, //查询条件
    	isShow:false,
    	customerIds:[],
    	checked:false,
    	returnGroupList:[],
    	salesGroupId:'',
    	targetProjectId: '',
		consultantUserId:'',
    	consultantUserList:[],
    	ftContactWayList:[],
		selProjectName: '',
		giveUpTypeShow: false
    		
	},
	filters:{
		formatDate(time) {
		    if(time){
                var date = new Date(time);
                return formatDate(date, "yyyy-MM-dd hh:mm:ss");
			}
        },
        formatLevel(val){
            if (val == 2) {
                return 'A';
            }else if (val == 3) {
                return 'B';
            }else if (val == 4) {
                return 'C';
            }else if (val == 5) {
                return 'D';
            }
            return val;
        }
      
	},
	watch:{
		'params.projectId':function(val,oldVal){
			var _self = this;
			this.initGiveUpList();
			_self.params.userCode = '';
			_self.params.ftContactWay = '';
			if(val==null||val==""){
				_self.isShow = false;
				_self.userList = [];
				_self.checked = '';
			}else{
				_self.checked = '';
				_self.isShow = true;
				_self.consultantUserId = '';
				var params={
					resourcesCode:'menu_0006_0020',
					projectId:val,
					isList:1
		    	};
				var apiUrl = "${pageContext.request.contextPath}/customer/customer/userByProjectIdForGroup";
		    	$.ajax({
		    		  type: "POST",
			          url: apiUrl,
			          data: params,
			          dataType: "json",
			          success: function(data){
			        	  _self.userList = data;
			         }
		    	 });
		    	this.contactWayList(val);
			}
		},
		'checked':function(val,oldVal){
			var _self = this;
			if(val){
				var obj = _self.giveUpList;
				if(obj!=null&&obj.length>0){
					for(var i=0;i<obj.length;i++){
						_self.customerIds.push(obj[i].id);
						_self.selProjectName = obj[i].projectName;
					}
				}
			}else{
				_self.customerIds=[];
			}
		},
		'targetProjectId': function(val, oldVal){
		    var _self = this;
            var url = "${pageContext.request.contextPath}/customer/customer/returnGroupList";
            var params = {
                resourcesCode:'menu_0006_0020',
                projectId: val
            };
            $.ajax({
                type: "POST",
                url: url,
                data: params,
                dataType: "json",
                success: function(data){
                    console.log(data)
                    _self.returnGroupList = data;
                }
            });
		},
		'salesGroupId':function(val,oldVal){
			var _self = this;
			if(val==null||val == ''){
				_self.consultantUserList = [];
				_self.consultantUserId='';
			}else{
				var url = "${pageContext.request.contextPath}/customer/customer/returnGroupUserList";
				var params = {
						resourcesCode:'menu_0006_0020',
						salesGroupId:val
				};
			    $.ajax({
		    		type: "POST",
			        url: url,
			        data: params,
			        dataType: "json",
			        success: function(data){
			           _self.consultantUserList = data;
			        }
		    	 });
			}
		}
	},
	mounted:function(){
	    var _self = this;
		_self.initProjectList();
        _self.customerIds = [];
        _self.salesGroupId = '';
		_self.consultantUserId = '';
	},
	methods:{
        checkCustomer: function(obj){
			var _self = this;
			_self.selProjectName = obj;
		},
		initGiveUpList:function(){
			var loadIndex = layer.load(1, {
				  shade: [0.1,'#fff'] //0.1透明度的白色背景
			});
			var _self = this;
	    	_self.params.page = _self.page;
	    	_self.params.limit = _self.limit;
	    	_self.params.createTimeBefore = $("#createTimeBefore").val();
	    	_self.params.createTimeAfter = $("#createTimeAfter").val();
	    	_self.params.resignTimeBefore = $("#resignTimeBefore").val();
	    	_self.params.resignTimeAfter = $("#resignTimeAfter").val();
	    	var apiUrl = "${pageContext.request.contextPath}/customer/giveUp/giveUpList";
	    	$.ajax({
	    		  type: "POST",
		          url: apiUrl,
		          data: _self.params,
		          dataType: "json",
		          success: function(data){
		        	  if(data.error!=null){
		        		  layer.alert(data.error);
		        	  }else{
			        	  _self.giveUpList = data.rows;
			        	   laypage({
			            		  cont: $('#pageing'), //容器。值支持id名、原生dom对象，jquery对象,
			            		  pages: data.totalPages, //总页数
			            		  curr:data.pageNumber,
			            		  skip: true, //是否开启跳页
			            		  skin: 'molv',
			            		  groups: 5, //连续显示分页数
			            		  jump: function(obj,first){
			            			  if(!first){
			            				  _self.page=obj.curr;
			            				  _self.initGiveUpList();
			            			  }
			            		  }
			            		});
		        	  }
		        	 layer.close(loadIndex);
		          }
	    	});
		},
		initProjectList:function(){
			var _self = this;
	    	var params={
				resourcesCode:'menu_0006_0020'
			};
	    	var apiUrl = "${pageContext.request.contextPath}/customer/giveUp/projectList";
	    	$.ajax({
	    		  type: "POST",
		          url: apiUrl,
		          data: params,
		          dataType: "json",
		          success: function(data){
		        	  _self.projectList = data;
		        	  //增加默认选中
		        	  if(data.length > 0){
		        	      console.log(data);
		        	      console.log(data[0].merchantId);
		        		  _self.params.projectId = data[0].id;
		        		  if(data[0].merchantId == 1){
		        		      _self.giveUpTypeShow = true;
						  }
		        	  }
		        	  _self.initGiveUpList();
		         }
	    	 });
	   },
	   exportGiveUpList:function(){
		    var _self = this;
		  	_self.params.createTimeBefore = $("#createTimeBefore").val();
	    	_self.params.createTimeAfter = $("#createTimeAfter").val();
	    	_self.params.resignTimeBefore = $("#resignTimeBefore").val();
	    	_self.params.resignTimeAfter = $("#resignTimeAfter").val();
	    	if(_self.giveUpList==null||_self.giveUpList.length<=0){
	    		layer.alert("暂无可导出数据!");
	    	}else{
	    		location.href = "${pageContext.request.contextPath}/customer/giveUp/exportCustomerGiveUpList?params="+JSON.stringify(_self.params);
	    	}
	   },
	   batchAllotCustomer:function(){
		   var _self = this;
		   var ids = _self.customerIds;
		   if(ids==null||ids.length<=0){
			   layer.alert("请选择分配客户!");
		   }else{
		       _self.targetProjectId = _self.params.projectId;
			   $('#myModal').modal('show');
			   var url = "${pageContext.request.contextPath}/customer/customer/returnGroupList";
			   var params = {
				   resourcesCode:'menu_0006_0020',
				   projectId:_self.params.projectId
			   };
			   $.ajax({
					type: "POST",
				  	url: url,
				  	data: params,
				  	dataType: "json",
				  	success: function(data){
						_self.returnGroupList = data;
				 	}
			   });
		   }
	   },
	   close:function(){
		   $('#myModal').modal('hide');
	   },
	   sumbitCustomer:function(){
		   var _self = this;
		   if(_self.consultantUserId==null||_self.consultantUserId==''){
			   layer.alert("请选择经纪人!");
		   }else{
				var loadIndex = layer.load(1, {
			   		shade: [0.1,'#fff'] //0.1透明度的白色背景
			   	});
			   var url = "${pageContext.request.contextPath}/customer/customer/distributionConsultant";
			   var params = {
				   	customerId: _self.customerIds.toString(),
				   	projectId: _self.salesGroupId, //实际为SaleGroup主键Id
				   	consultantUserId: _self.consultantUserId
			   };
			   $.ajax({
		    		  type: "POST",
			          url: url,
			          data: params,
			          dataType: "json",
			          success: function(data){
			        	 layer.alert(data.resMsg);
			        	 _self.close();
			        	 _self.initGiveUpList();
                          _self.customerIds = [];
                          _self.salesGroupId = '';
                          _self.consultantUserId = '';
			         }
		    	});
			    layer.close(loadIndex);
		   }
	   },
	   customerDetail:function(row){
		   var projectId = row.projectId;
		   var id = row.id;
		   var tabKey = "cus_"+id;
		   var resourcesCode = 'menu_0006_0001';
		   var url = "/customer/customer/toDetail?customerId="+id+"&projectId="+projectId+"&resourcesCode="+resourcesCode+"&giveUp=1&1=1";
		   parent.openMenu('0',tabKey,'','客户详情',url);
	   },
	   contactWayList:function(projectId){
		    if(projectId==null||projectId==''){
		    	_self.ftContactWayList = [];
		    }
			var _self = this;
        	var url = '${pageContext.request.contextPath}/system/baseCodeValue/getCodeNameByType';
        	var params = {
        			projectId:projectId,
        			typeValue:'contactWay'
        	};
        	$.ajax({
       		 	 type: "POST",
		         url: url,
		         data: params,
		         dataType: "json",
		         success:function(data){
		        	_self.ftContactWayList = data;
		         }
       		});
	   },
	   restButton:function(){
		   var _self = this;
		   _self.params = {
				   resourcesCode:'menu_0006_0020',
				   giveUpStatus:1,
				   projectId:'',
				   intentionLevel:'',
				   userCode:'',
				   ftContactWay:''
		   };
		   $("#createTimeBefore").val("");
	       $("#createTimeAfter").val("");
	       $("#resignTimeBefore").val("");
	       $("#resignTimeAfter").val("");
		   _self.ftContactWayList = [];
	   }
	 
	 }
});
</script>
</html>